<template>
  <div style="display: flex; height: 100vh; background-color: #f5f7fa;">
    <!-- 左侧菜单栏 -->
    <div
        :style="{
        width: isCollapse ? '64px' : '220px',
        transition: 'width 0.3s',
        backgroundColor: '#304156',
        height: '100vh',
        overflowY: 'auto'
      }"
    >
      <el-menu
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="$route.path"
          style="height: 100%; border-right: none;"
      >
        <!-- 菜单的顶部条 -->
        <div class="menu-header" @click="changeCollapse" style="padding: 20px; display: flex; align-items: center; justify-content: center; background: #263445;">
          <span v-if="!isCollapse" style="font-weight: bold; color: #fff;font-size: 18px;">智慧养老平台</span>
          <el-icon :size="20" :color="isCollapse ? '#fff' : '#fff'" style="margin-left: 10px;">
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
        </div>

        <!-- 个人信息-->
        <el-menu-item index="/admin/information">
          <el-icon><HomeFilled /></el-icon>
          <template #title>个人信息</template>
        </el-menu-item>

        <!-- 团队管理 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><User /></el-icon>
            <span>团队管理</span>
          </template>
          <el-menu-item index="/admin/adminList">管理员管理</el-menu-item>
          <el-menu-item index="/admin/volunteerList">志愿者管理</el-menu-item>
          <el-menu-item index="/admin/elderlyList">老人管理</el-menu-item>
          <el-menu-item index="/admin/familyList">家属管理</el-menu-item>
          <el-menu-item index="/admin/serviceStaffList">服务人员管理</el-menu-item>
        </el-sub-menu>

        <!-- 审核管理 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><DocumentChecked /></el-icon>
            <span>审核管理</span>
          </template>
          <el-menu-item index="/admin/familyAudit">家属信息审核</el-menu-item>
          <el-menu-item index="/admin/volunteerAudit">志愿者审核</el-menu-item>
          <el-menu-item index="/admin/housekeeperAudit">家政审核</el-menu-item>
          <el-menu-item index="/admin/doctorAudit">医生审核</el-menu-item>
        </el-sub-menu>

        <!-- 系统管理 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/admin/regionManage">区域管理</el-menu-item>
        </el-sub-menu>

        <!-- 公告管理 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>通知管理</span>
          </template>
          <el-menu-item index="/admin/noticeList">公告管理</el-menu-item>
          <el-menu-item index="/admin/activityList">活动管理</el-menu-item>
        </el-sub-menu>

        <!-- 养老管理 -->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>养老管理</span>
          </template>
          <el-menu-item index="/admin/familyInfo">家属信息</el-menu-item>
          <el-menu-item index="/admin/healthRecord">健康档案</el-menu-item>
        </el-sub-menu>

        <!-- 医护管理 -->
        <el-sub-menu index="6">
          <template #title>
            <el-icon><FirstAidKit /></el-icon>
            <span>医护管理</span>
          </template>
          <el-menu-item index="/admin/medicationRecord">用药记录</el-menu-item>
        </el-sub-menu>

        <!-- 后勤管理 -->
        <el-sub-menu index="7">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>后勤管理</span>
          </template>
          <el-menu-item index="/admin/pointsExchange">积分兑换商品</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div
        :style="{
        width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 220px)',
        transition: 'width 0.3s',
        display: 'flex',
        flexDirection: 'column',
        height: '100vh',
        overflowY: 'auto'
      }"
    >
      <!-- 右侧顶部条 -->
      <el-header style="background-color: #fff; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.05); height: 60px; display: flex; align-items: center; justify-content: space-between;">
        <!-- 面包屑导航 -->
        <div style="padding-left: 20px;">
          <el-breadcrumb separator="/" style="font-size: 16px;">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 用户信息 -->
        <div style="padding-right: 20px; display: flex; align-items: center;">
          <el-dropdown>
            <span class="el-dropdown-link" style="display: flex; align-items: center;">
              <el-avatar :size="32" :src="userAvatar" style="margin-right: 8px;" />
              <span style="margin-right: 5px;">{{ userName }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">个人信息</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 右侧主体内容(可变区域) -->
      <el-main style="padding: 20px; margin-left: 0; background-color: #f5f7fa; flex: 1;">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {
  HomeFilled,
  User,
  DocumentChecked,
  Setting,
  MessageBox,
  OfficeBuilding,
  FirstAidKit,
  Goods,
  Expand,
  Fold,
  ArrowDown
} from '@element-plus/icons-vue';

// 控制左侧菜单栏是否折叠
const isCollapse = ref(false);
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
}

// 用户信息
const userName = ref('管理员');
const userAvatar = ref('');

// 当前路由名称
const route = useRoute();
const router = useRouter();

// 面包屑功能
const breadcrumb = ref([]);
const routeMap = {
  '/admin/information': ['个人信息'],
  '/admin/adminList': ['团队管理', '管理员管理'],
  '/admin/volunteerList': ['团队管理', '志愿者管理'],
  '/admin/elderlyList': ['团队管理', '老人管理'],
  '/admin/familyList': ['团队管理', '家属管理'],
  '/admin/serviceStaffList': ['团队管理', '服务人员管理'],
  '/admin/familyAudit': ['审核管理', '家属信息审核'],
  '/admin/volunteerAudit': ['审核管理', '志愿者审核'],
  '/admin/housekeeperAudit': ['审核管理', '家政审核'],
  '/admin/doctorAudit': ['审核管理', '医生审核'],
  '/admin/regionManage': ['系统管理', '区域管理'],
  '/admin/noticeList': ['通知管理', '公告管理'],
  '/admin/activityList': ['通知管理', '活动管理'],
  '/admin/familyInfo': ['养老管理', '家属信息'],
  '/admin/healthRecord': ['养老管理', '健康档案'],
  '/admin/medicationRecord': ['医护管理', '用药记录'],
  '/admin/pointsExchange': ['后勤管理', '积分兑换商品'],
};

// 更新面包屑
const updateBreadcrumb = (currentRoute) => {
  const path = currentRoute.path;
  breadcrumb.value = routeMap[path] || [];
};

// 初始化面包屑
onMounted(() => {
  updateBreadcrumb(route);
});

// 路由守卫监听路由变化
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
});

// 跳转到个人信息
const goToProfile = () => {
  router.push('/admin/information');
};

// 退出登录
const logout = () => {
  // 这里添加退出登录逻辑
  router.push('/login');
};
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.el-menu-item {
  font-size: 14px;
  height: 46px;
  line-height: 46px;
}

.el-sub-menu__title {
  font-size: 14px;
  height: 46px;
  line-height: 46px;
}

/* 悬浮和激活状态背景色 */
.el-menu-item:hover,
.el-sub-menu__title:hover,
.el-sub-menu .el-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.el-menu-item.is-active,
.el-sub-menu__title.is-active,
.el-sub-menu .el-menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.1) !important;
  color: #409EFF !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>